<template>
  <div class="wrapper">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品分类</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-button
        type="primary"
        @click="addCaties"
      >添加分类</el-button>
      <tree-table
        style="margin:10px 0;"
        ref="table"
        index-text="#"
        :data="treeDataList"
        :columns="columns"
        :stripe="true"
        :border="true"
        :show-row-hover="true"
        :show-index="true"
        :tree-type="true"
        :is-fold="true"
        :expand-type="false"
        :selection-type="false"
      >
        <template
          slot="cat_deleted"
          slot-scope="scope"
        >
          <i
            class="el-icon-success"
            style="color:lightgreen; font-size:20px;"
            v-if="scope.row.cat_deleted==false"
          ></i>
          <i
            class="el-icon-error"
            style="color:red; font-size:20px;"
            v-else-if="scope.row.cat_deleted==true"
          ></i>

        </template>
        <template
          slot="cat_level"
          slot-scope="scope"
        >
          <el-tag v-if="scope.row.cat_level==0">一级</el-tag>
          <el-tag
            type="success"
            v-else-if="scope.row.cat_level==1"
          >二级</el-tag>
          <el-tag
            type="warning"
            v-else-if="scope.row.cat_level==2"
          >三级</el-tag>
        </template>
        <template
          slot="active"
          slot-scope="scope"
        >
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            @click="onOption(scope.row)"
          >编辑</el-button>
          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="onDelete(scope.row)"
          >删除</el-button>
        </template>
      </tree-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="categoriesParams.pagenum"
        :page-sizes="[5, 10, 15, 20]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogCatVisible"
      width="50%"
      :close-on-click-modal="false"
      @close="onCancle"
    >
      <el-form
        :model="addCategoriesParams"
        :rules="rules"
        label-width="100px"
        ref="addForm"
      >
        <el-form-item
          label="分类名称"
          prop="cat_name"
        >
          <el-input v-model="addCategoriesParams.cat_name"></el-input>
        </el-form-item>
        <el-form-item
          label="父级分类"
          v-show="isShow"
        >
          <el-cascader
            style="width:100%;"
            :options="categoiesNameList"
            @change="selectChange"
            expandTrigger="hover"
            :props="cascaderProps"
            v-model="selectData"
          ></el-cascader>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogCatVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="onCommit"
        >确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data () {
    return {
      categoriesParams: {
        type: 3,
        pagenum: 1,
        pagesize: 20
      },
      addCategoriesParams: {
        cat_level: 0,
        cat_name: '',
        cat_pid: 0
      },
      total: 0,
      treeDataList: [],
      dialogCatVisible: false,
      rules: {
        cat_name: [
          { required: true, message: '请输入分类商品名称', trigger: 'blur' }
        ]
      },
      categoiesNameList: [],
      selectData: '',
      isShow: true,
      dialogTitle: '添加分类商品',
      columns: [
        {
          label: '分类名称',
          prop: 'cat_name',
          width: '200px'
        },
        {
          label: '是否有效',
          prop: 'cat_deleted',
          type: 'template',
          width: '100px',
          template: 'cat_deleted'
        },
        {
          label: '排序',
          prop: 'cat_level',
          type: 'template',
          width: '100px',
          template: 'cat_level'
        },
        {
          label: '操作',
          type: 'template',
          template: 'active',
          width: '200px'
        }
      ],
      cascaderProps: {
        value: 'cat_id',
        label: 'cat_name',
        children: 'children',
        expandTrigger: 'hover',
        checkStrictly: true
      }
    }
  },
  computed: {
    getLevel () {
      if (this.selectData === '') {
        return 0;
      } else if (this.selectData.length === 1) {
        return 1;
      } else if (this.selectData.length === 2) {
        return 2;
      }
      return 0;
    },
    getPid () {
      if (this.selectData.length === 1) {
        return this.selectData[0];
      } else if (this.selectData.length === 2) {
        return this.selectData[1];
      }
      return 0;
    }
  },
  created () {
    this.getCateGoriesList();
  },
  methods: {
    async getCateGoriesList () {
      const { data: res } = await this.$http.get('categories', { params: this.categoriesParams });
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      this.treeDataList = res.data.result;
      this.total = res.data.total;
    },
    async getCateDialogGoriesList () {
      const { data: res } = await this.$http.get('categories', { params: { type: 2 } });
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      this.categoiesNameList = res.data;
    },
    async deleteCat (data) {
      const { data: res } = await this.$http.delete(`categories/${data.cat_id}`);
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      this.$message.success(res.meta.msg);
      this.getCateGoriesList();
    },
    async addCat () {
      const { data: res } = await this.$http.post('categories', this.addCategoriesParams);
      if (res.meta.status !== 201) return this.$message.error(res.meta.msg);
      this.$message.success(res.meta.msg);
      this.getCateGoriesList();
    },
    async editCatName () {
      const { data: res } = await this.$http.put(`categories/${this.addCategoriesParams.cat_pid}`, { cat_name: this.addCategoriesParams.cat_name });
      if (res.meta.status !== 200) return this.$message.error(res.meta.msg);
      this.$message.success(res.meta.msg);
      this.getCateGoriesList();
    },
    handleSizeChange (pagesize) {
      this.categoriesParams.pagesize = pagesize;
      this.getCateGoriesList();
    },
    handleCurrentChange (page) {
      this.categoriesParams.pagenum = page;
      this.getCateGoriesList();
    },
    onOption (data) {
      this.isShow = false;
      this.addCategoriesParams.cat_name = data.cat_name;
      this.addCategoriesParams.cat_pid = data.cat_id;
      this.dialogTitle = '修改商品分类';
      this.dialogCatVisible = true;
    },
    addCaties () {
      this.isShow = true;
      this.dialogTitle = '添加商品分类';
      this.dialogCatVisible = true;
      this.getCateDialogGoriesList();
    },
    onDelete (data) {
      this.$confirm('此操作将永久删除该分类, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteCat(data)
      });
    },
    onCancle () {
      this.$refs.addForm.validate((result) => {
        this.$refs.addForm.resetFields();
        this.dialogCatVisible = false;
      });
      this.$refs.addForm.clearValidate();
      this.selectData = '';
    },
    onCommit () {
      this.$refs.addForm.validate((result) => {
        if (result) {
          if (this.isShow) {
            if (this.selectData === '') {
              this.addCategoriesParams.cat_level = 0;
              this.addCategoriesParams.cat_pid = 0;
            } else {
              this.addCategoriesParams.cat_level = this.getLevel;
              this.addCategoriesParams.cat_pid = this.getPid;
            }
            this.addCat();
          } else {
            this.editCatName();
          }
          this.dialogCatVisible = false;
        }
      });
    },
    selectChange () {

    }
  }
}
</script>
<style lang="sass" scoped>
</style>
